<template>
  <div>
      <div class="container">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item class="mb">
                  会员列表
              </el-breadcrumb-item>
          </el-breadcrumb>
          <div class="handle-box">
              <span>商品名称：</span><el-input v-model="query.name"  class="handle-input mr10"></el-input>
              <span>门店地址：</span><el-input v-model="query.location"  class="handle-input mr10"></el-input>
              <p class="mt">
                  <el-button type="primary" @click="handleSearch">筛选</el-button>
                  <el-button type="primary" @click="handleSearch">导出</el-button>
              </p>
          </div>
          <el-table
              :data="tableData"
              border
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
          >
              <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
              <el-table-column class="height" prop="address" label="门店地址" align="center"></el-table-column>
              <el-table-column prop="principal" label="负责人" align="center"></el-table-column>
              <el-table-column prop="createTime" label="注册时间" align="center"></el-table-column>
              <el-table-column
              align="center"
              prop="tag"
              label="标签"
              width="100"
              >
              <template slot-scope="scope">
                  <el-tag
                  :type="scope.row.status === 0 ? '未审核' : '已审核'"
                  disable-transitions>{{scope.row.status === 0 ? '未审核' : '已审核'}}</el-tag>
              </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                      <el-button
                      size="mini"
                      type="primary"
                      @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                      <el-button
                      size="mini"
                      type="primary"
                      @click="handleDelete(scope.$index, scope.row)">审核</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <div class="pagination">
              <el-pagination
                  background
                  layout="total, prev, pager, next"
                  :current-page="query.pageIndex"
                  :page-size="query.pageSize"
                  :total="pageTotal"
                  @current-change="handlePageChange"
              ></el-pagination>
          </div>
      </div>
  </div>
</template>

<script>
import { sort,detailed,delet } from '../../../api/index';
import router from '../../../router';
export default {
    name: "basetable",
    data() {
        return {
            query: {
                location: "",
                name: "",
                pageNum: 1,
                pageSize: 2,
            },
            tableData: [],
            pageTotal: 0,
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            sort(this.query).then(res => {
                console.log(res);
                this.tableData = res.data.records;
                this.pageTotal = res.data.total || 50;
            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, "pageNum", 1);
            this.getData();
        },
        // 详情
        handleEdit(index, row) {
            console.log(index, row);
            this.$router.push("/Detailed");
            detailed({
                id:row.name,
                creationTime:'',
                lastAccessedTime:'',
                maxInactiveInterval:'',
            }).then(r=>{
                console.log(r);
            })
        },
        //审核
        handleDelete(index, row) {
            console.log(index, row);
            delet({
                id:row.id,
                status:row.status,
                statueDesc:row.statueDesc,
            }).then(r=>{
                console.log(r);
            })
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, "pageIndex", val);
            this.getData();
        }
    },
    components: { router }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
  background-color: rgb(245,245,245);
  padding: 20px 60px;
}
.mb{
  margin-bottom: 10px;
}
.handle-select {
  width: 120px;
}
>>>.el-table tbody tr{
  height: 100px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 40px;
}
.mt{
  margin-top: 20px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
